<template>
  <div class="run-modal-style">
    <Form
      :model="form"
      :label-width="120"
      :rules="rules"
      ref="userForm"
    >
    <!-- 用户名 -->
    <Row class="code-row-bg">
      <Col span="24" style="border: none;">
        <Form-item :label="$t('module.userManage.userName')" prop="first">
          <Input
            type="text"
            :maxlength="30"
            v-model.trim="form.first"
            :placeholder="$t('module.userManage.inputUserName')"
            
          />
        </Form-item>
      </Col>
    </Row>

    <!-- 密码 -->
    <Row class="code-row-bg">
      <Col span="24" style="border: none;">
        <Form-item :label="$t('module.userManage.pwd')" prop="pwd">
          <Input
            type="password"
            v-model.trim="form.pwd"
            :placeholder="$t('module.userManage.inputPwd')"
            
          />
        </Form-item>
      </Col>
    </Row>

    <!-- 邮箱 -->
    <Row class="code-row-bg">
      <Col span="24" style="border: none;">
        <Form-item :label="$t('module.userManage.email')" prop="email">
          <Input
            type="email"
            v-model.trim="form.email"
            :placeholder="$t('module.userManage.inputEmail')"
            
          />
        </Form-item>
      </Col>
    </Row>

    <!-- 手机号 -->
    <Row class="code-row-bg">
      <Col span="24" style="border: none;">
        <Form-item :label="$t('module.userManage.phone')" prop="phone">
          <Input
            type="tel"
            v-model.trim="form.phone"
            :placeholder="$t('module.userManage.inputPhone')"
            
            :maxlength="11"
          />
        </Form-item>
      </Col>
    </Row>

    </Form>
  </div>
</template>

<script>
import { addUser, updateUser } from '@api/flowable/userManageAPI.js'
import locales from "./locales.js";

const phoneNumREG = /^1[3456789]\d{9}$/

export default {
  props: {
    userInfo: {
      type: Object,
      default: () => ({})
    }
  },
  mixins: [locales],
  data() {
    const validatePhoneNum = (rule, value, callback) => {
      if (value === '') {
        callback(new Error(this.$t('module.userManage.inputPhone')))
      } else if (!phoneNumREG.test(value)) {
        callback(new Error(this.$t('module.userManage.checkPhoneFormat')))
      }
      callback()
    }

     const validatePassword = (rule, value, callback) => {
      let regSign = /^[\x00-\xff]*$/;
      // 兼容编辑时 密码可为空的情况
      if (this.userInfo.id && (value === "" || value === null)) {
        callback();
      } else {
        if (value === "") {
          callback(new Error(this.$t('module.userManage.inputPwd')));
        } else if (value.length < 8 || value.length > 20) {
          callback(new Error(this.$t("module.userCenter.formatPassword")));
        } else if (!regSign.test(value)) {
          callback(new Error(this.$t("module.userCenter.InvaildSymbol")));
        } else if (
          !new RegExp(
            "^(?=.*[A-Z])(?=.*[a-z])(?=.*\\d)(?=.*[-$\\]~(^{\\\\+|/_:})=@\\[;',<`\">.!%*#?&])[A-Za-z\\d-$\\]~(^{\\\\+|/_:})=@\\[;',<`\">.!%*#?&]{8,}$"
          ).test(value)
        ) {
          callback(new Error(this.$t("module.userCenter.complexPassword")));
        }
        callback();
      }
    };

    return {
      form: {
        first: '',
        email: '',
        phone: '',
        pwd: ''
      },
      actions: [
        {
          text: this.userInfo.id ? this.$t('module.userManage.update') : this.$t('module.userManage.add'),
          theme: 'primary',
          handle: () => this.addOrEditUser(),
          loading: false
        },
        {
          text: this.$t('common.close'),
          // theme: 'primary',
          handle: () => this.$emit('Close')
        }
      ],
      rules: {
        first: [{ required: true, message: this.$t('module.userManage.inputUserName'), trigger: 'blur' }],
        email: [
          { required: true, message: this.$t('module.userManage.inputEmail'), trigger: 'blur' },
          { type: 'email', message: this.$t('module.userManage.checkEmailFormat'), trigger: 'blur' }
        ],
        phone: [{ required: true, trigger: 'blur', validator: validatePhoneNum }],
        pwd: [{ required: this.userInfo.id ? false : true, validator: validatePassword.bind(this), trigger: 'blur' }]
      }
    }
  },
  created() {
    if (this.userInfo.id) {
      this.form = { ...this.userInfo }
    }
    this.$emit('SetTitle', this.userInfo.id ? this.$t('module.userManage.updateUser') : this.$t('module.userManage.addUser'))
    this.$emit('SetPageActions', this.actions)
  },
  methods: {
    addOrEditUser() {
      if (!this.userInfo.id) {
        this.$refs['userForm'].validate((valid) => {
          if (!valid) {
            return this.$Message.warning(this.$t('module.userManage.checkFromWarning'))
          }
          // 新增用户
          addUser({
            first: this.form.first,
            email: this.form.email,
            phone: this.form.phone,
            pwd: this.form.pwd
          }).then((res) => {
            this.$Message.success(this.$t('module.userManage.addSuccess'))
            this.$emit('Close', res)
          }).catch(() => this.$Message.warning(this.$t('module.userManage.addFail')))
        })
      } else {
          debugger
          this.$refs['userForm'].validate((valid) => {
          if (!valid) return this.$Message.warning(this.$t('module.userManage.checkFromWarning'))
          // 修改用户
          updateUser({
            id: this.form.id,
            first: this.form.first,
            email: this.form.email,
            phone: this.form.phone,
            pwd: this.form.pwd
          }).then((res) => {
            this.$Message.success(this.$t('module.userManage.updateSuccess'))
            this.$emit('Close', res)
          }).catch(() => this.$Message.warning(this.$t('module.userManage.updateFail')))
        })
      }
    }
  }
}
</script>
